<template>
    <div class="search_relative">
        <div class="search" v-show="showSearch">
            <slot></slot>
        </div>
        <div class="search_expand" v-if="showSearch" @click="showSearch = !showSearch">收起<img
                src="@/assets/images/icon_lanseshouqi.png" alt=""></div>
        <el-divider v-else>
            <div class="search_divider" @click="showSearch = !showSearch">展开<img
                    src="@/assets/images/icon_lansezhankai.png" alt=""></div>
        </el-divider>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const showSearch = ref(true)

</script>

<style lang="scss" scoped>
.search_relative {
    position: relative;

    .search_expand {
        text-align: center;
        position: absolute;
        bottom: 0;
        left: 50%;
        padding: 0 20px;
        transform: translate(-50%, 0);
        background: #fff;
        color: #0094FF;
        cursor: pointer;

        img {
            width: 10px;
            height: 10px;
            margin-left: 5px;
        }
    }

    .search_divider {
        color: #0094FF;
        cursor: pointer;

        img {
            width: 10px;
            height: 10px;
            margin-left: 5px;
        }
    }
}
</style>